<template>
    <div class="header" :flag="flag">
        <a href="#">
            <img src="../assets/logo-white.png">
        </a>
        <div class="title">
            <h1>HIRING PORTAL</h1>
            <div v-if="email&&flag==1" style="text-align: right">{{email}}<u style="cursor: pointer" @click="loginOut">[Log off]</u></div>
        </div>
        <div class="a-img">
            <img class="rightImg" src="../assets/subject.png">
        </div>
    </div>
</template>

<script>
    export default {
        name: "ApplyHeader",
        props:{
            flag:{//0从applyNew 1从其他地方进入
                type:String,
                default:'0',
            }
        },
        data(){
            return{
                email:'',
            }
        },
        methods:{
            loginOut(){
                console.log("注销");
                localStorage.removeItem('email')
                localStorage.removeItem('token')
                this.$router.push('/login')
            }
        },
        created() {
            console.log('取到的flag',this.flag)
            this.email = localStorage.getItem('email')
        }
    }
</script>

<style scoped>
    .header{
        height: 40px;
    }
    .header a img{
        width: 200px;
    }
    .title{
        float:right;
        color:#fff;
        margin-right:200px;
        height: 40px;
    }
    .title div{
        margin-top: 0px;
    }
    .title h1{
        margin-top: 0px;
    }
    .rightImg{
        position:absolute;
        right:0px;
        top:0;
        width:200px;
    }
    @media screen and (max-width: 1440px) {
        .header{
            height: 40px;
        }
        .header a img{
            width: 200px;
        }
        .title{
            height: 40px;
            line-height: 40px;
        }
        .rightImg{
            width: 120px;
        }
        .title div{
            margin-top: -15px;
        }
        .title h1{
            margin-top: -5px;
        }
    }
    @media screen and (max-width: 1200px) {
        .header a img{
            width: 200px;
        }
        .title{
            line-height: 30px;
            height: 30px;
        }
        .header{
            height: 30px;
        }
        .rightImg{
            width:120px;
        }
        .title div{
            margin-top: -5px;
        }
        .title h1{
            margin-top: -5px;
        }
    }
</style>